import './index.less'
import { getImage } from '@/tools'
import { useState } from 'react'
import { tableList } from '@/api/wealth-management.ts'
import { columns, collapseList } from './tools.tsx'
import { Table } from "@arco-design/web-react";
import Tabs from '@/components/tabs'
import WealthCollapse from './components/collapse'
import Footer from '@/components/footer'
import CustomerService from '@/components/customer-service'

// 不考虑多语言就写在外面
const tabList = [{ name: '全期', value: 0 }, { name: '活期', value: 1 }, { name: '定期', value: 2 }]

function WealthManagement() {
  const [tabValue, setTabValue] = useState<number>(0)
  return (
    <>
      <div className='wealth-box'>
        <div className='wealth-width'>
          <div>
            <div className='wealth-fontWeight'>稳定生息，简单赚币</div>
            <div className='wealth-paragraph'>投资保本型产品，赚取稳定收益</div>
          </div>
          <div>
            <img src={getImage('wealth-management', 'header-img.png')} alt="" />
          </div>
        </div>
      </div>

      <div className='wealth-main'>
        <Tabs tabList={tabList} tabValue={tabValue} setTabValue={setTabValue}></Tabs>
        <div className='wealth-tab'>
          <Table className={'table-body'} columns={columns} data={tableList[tabValue]} pagination={false} />
        </div>
      </div>

      <div className='wealth-question-box'>
        <div className='wealth-question'>
          <div className='question-text'>
            常见问题
          </div>
          <div>
            <WealthCollapse list={collapseList}></WealthCollapse>
          </div>
        </div>
      </div>

      <Footer></Footer>
      <CustomerService></CustomerService>
    </>
  )
}

export default WealthManagement